<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<title>购物车页面</title>

	<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
	<link href="../basic/css/demo.css" rel="stylesheet" type="text/css" />
	<link href="../css/cartstyle.css" rel="stylesheet" type="text/css" />
	<link href="../css/optstyle.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript" src="../js/jquery.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
	<script src="../js/axiosUtil.js"></script>
	<style>
		.goodImg {
			height: 80px;
			width: 80px;
		}
	</style>
</head>

<body>
	<div id="app1">
		<!--顶部导航条 -->
		<div class="am-container header">
			<ul class="message-l">
				<div class="topMessage">
					<template v-if="!islogin">
						<div class="menu-hd">
							<a href="login.html" target="_top" class="h">亲，请登录</a>
							<a href="register.html" target="_top">免费注册</a>
						</div>
					</template>
					<template v-else>
						<div class="menu-hd">
							<a href="#" style="color: red;">{{username}}</a>
							<a href="#" @click="logout">退出登录</a>
						</div>
					</template>
				</div>
			</ul>
			<ul class="message-r" v-if="islogin">
				<div class="topMessage home">
					<div class="menu-hd"><a href="home.html" target="_top" class="h">商城首页</a></div>
				</div>
				<template v-if="islogin">
					<div class="topMessage my-shangcheng">
						<div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i
									class="am-icon-user am-icon-fw"></i>个人中心</a></div>
					</div>
					<div class="topMessage mini-cart">
						<div class="menu-hd"><a id="mc-menu-hd" href="shopcart.html" target="_top"><i
									class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong
									id="J_MiniCartNum" class="h">0</strong></a></div>
					</div>
				</template>
			</ul>
		</div>

		<!--悬浮搜索框-->

		<div class="nav white">
			<div class="logo"><img src="../images/logo.png" /></div>
			<div class="logoBig">
				<li><img src="../images/logobig.png" /></li>
			</div>

			<div class="search-bar pr">
				<a name="index_none_header_sysc" href="#"></a>
				<form onsubmit="return false;">
					<input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索"
						autocomplete="off" v-model="name">
					<input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button" @click="search">
				</form>
			</div>
		</div>
	</div>

	<div class="clear"></div>

	<!--购物车 -->
	<div class="concent" id="app2">
		<div id="cartTable">
			<div class="cart-table-th">
				<div class="wp">
					<div class="th th-chk">
						<div id="J_SelectAll1" class="select-all J_SelectAll">

						</div>
					</div>
					<div class="th th-item">
						<div class="td-inner">商品信息</div>
					</div>
					<div class="th th-price">
						<div class="td-inner">单价</div>
					</div>
					<div class="th th-amount">
						<div class="td-inner">数量</div>
					</div>
					<div class="th th-sum">
						<div class="td-inner">金额</div>
					</div>
					<div class="th th-op">
						<div class="td-inner">操作</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>

			<template v-for="(cartItem,index) in tableData" :key="index">
				<tr class="item-list">
					<div class="bundle  bundle-last ">
						<div class="bundle-main">
							<ul class="item-content clearfix">
								<li class="td td-chk">
									<div class="cart-checkbox ">
										<input class="check" type="checkbox" v-model="checkItem[index]">
										<label for="J_CheckBox_170037950254"></label>
									</div>
								</li>
								<li class="td td-item">
									<div class="item-pic">
										<a href="#" target="_blank" class="J_MakePoint" data-point="tbcart.8.12">
											<img :src="cartItem.image" class="itempic J_ItemImg goodImg"></a>
									</div>
									<div class="item-info">
										<div class="item-basic-info">
											<a href="#" target="_blank" class="item-title J_MakePoint"
												data-point="tbcart.8.11">
												{{cartItem.productName}}
											</a>
										</div>
									</div>
								</li>
								<li class="td td-info">
									<div class="item-props item-props-can">

									</div>
								</li>
								<li class="td td-price">
									<div class="item-price price-promo-promo">
										<div class="price-content">

											<div class="price-line">
												<em class="J_Price price-now"
													tabindex="0">{{cartItem.productPrice}}</em>
											</div>
										</div>
									</div>
								</li>
								<li class="td td-amount">
									<div class="amount-wrapper ">
										<div class="item-amount ">
											<div class="sl">
												{{cartItem.quantity}}
											</div>
										</div>
									</div>
								</li>
								<li class="td td-sum">
									<div class="td-inner">
										<em tabindex="0"
											class="J_ItemSum number">{{cartItem.quantity * cartItem.productPrice}}</em>
									</div>
								</li>
								<li class="td td-op">
									<div class="td-inner">
										<a href="javascript:;" data-point-url="#" class="delete"
											@click="del(cartItem.id)">
											删除</a>
									</div>
								</li>
							</ul>


						</div>
					</div>
					<div class="clear"></div>
				</tr>

			</template>

		</div>

		<div class="float-bar-wrapper">
			<div id="J_SelectAll2" class="select-all J_SelectAll">
				<div class="cart-checkbox">
					<input class="check-all check" id="J_SelectAllCbx2" name="select-all" @click="selectAll" type="checkbox">
					<label for="J_SelectAllCbx2"></label>
				</div>
				<span>全选</span>
			</div>
			<div class="operations">
				<a href="#" hidefocus="true" class="deleteAll">删除</a>
			</div>
			<div class="float-bar-right">
				<div class="amount-sum">
					<span class="txt">已选商品</span>
					<em id="J_SelectedItemsCount">{{total}}</em><span class="txt">件</span>
					<div class="arrow-box">
						<span class="selected-items-arrow"></span>
						<span class="arrow"></span>
					</div>
				</div>
				<div class="price-sum">
					<span class="txt">合计:</span>
					<strong class="price">¥<em id="J_Total">{{sum}}</em></strong>
				</div>
				<div class="btn-area">
					<a href="#" id="J_Go" class="submit-btn submit-btn-disabled" >
						<span @click="pay">结&nbsp;算</span></a>
				</div>
			</div>

		</div>

	</div>

	<div class="footer">
		<div class="footer-hd ">
			<p>
				<a href="# ">燕园科技</a>
				<b>|</b>
				<a href="home.html">商城首页</a>
				<b>|</b>
				<a href="# ">支付宝</a>
				<b>|</b>
				<a href="# ">物流</a>
			</p>
		</div>
		<div class="footer-bd ">
			<p>
				<a href="#">关于燕园</a>
				<a href="# ">合作伙伴</a>
				<a href="# ">联系我们</a>
				<a href="# ">网站地图</a>
			</p>
		</div>
	</div>
	<script src="../js/public.js"></script>
	<script>
		let vm2 = new Vue({
			el: '#app2',
			data: {
				tableData: [],
				checkItem: [],
				total: 0,
				sum: 0.00
			},
			created() {
				this.getData()
			},
			methods: {
				getData() {
					$axios.get('/shopping-cart',
						response => {
							this.tableData = response.data
							this.checkItem.length = this.tableData.length
							for (let i = 0, len = this.tableData.length; i < len; ++i) {
								Vue.set(this.checkItem, i, false)
							}
						}
					)
				},
				del(id) {
					$axios.del(`/shopping-cart/${id}`,
						response => {
							this.getData()
						}
					)
				},
				selectAll(event) {
					for (let i = 0, len = this.tableData.length; i < len; ++i) {
						Vue.set(this.checkItem, i, event.target.checked)
					}
				},
				pay(){
					let ids = this.tableData.filter((val,index)=>this.checkItem[index]).map(val=>val.id)
					if (ids.length < 1) {
						window.alert("亲，请选择需要购买的商品")
						return
					}
					$axios.post('/order',
						response => {
							window.localStorage.setItem("orderNo",response.data)
							window.location.href = "pay.html"
						},
						{
							ids: ids.join(','),
							payment: this.sum
						}
					)
				}
			},
			watch: {
				checkItem: {
					deep: true, //深度监听
					handler: function () {
						this.total = this.checkItem.filter(i=>i).length
						this.sum = this.tableData.map((val,index)=> {
							if(this.checkItem[index]){
								return parseFloat(val.productPrice*val.quantity)
							} else {
								return 0
							}
						}).reduce((acc,val)=>acc+val,0)
					}
				}
			}
		})
	</script>
</body>

</html>